<template>
  <div class="member-footprint-container">
    <Headbar />
    <MemberHeadMenu ide-name="footprint" />
    <Hungbar />

    <div class="yh-layout-box footprint-box">
      <div class="block">
        <div class="footprint-title">
          <span>我的足迹</span>
        </div>

        <el-timeline class="">
          <el-timeline-item timestamp="今天" placement="top" >
            <el-button type="text" class="product-item-delete" v-if="remove1 === 0" v-on:click="remove1 = 1">删除</el-button>
            <el-button type="text" class="product-item-delete" v-if="remove1 === 1" v-on:click="remove1 = 0">取消</el-button>
            <el-card class="product-item-clear">
              <div class="product-item" v-for="(view,index) in todayView">
                <div class="product-item-remove" v-if="remove1 === 1 " v-on:click="removeViewHistory(view.id)">
                  ×
                </div>
                <img :src="URL.PIC + view.mainImgPath"/>
                <span>{{view.title}}</span>
                <p>￥{{view.price}}</p>
              </div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="昨天" placement="top">
            <el-button type="text" class="product-item-delete" v-if="remove2 === 0" v-on:click="remove2 = 1">删除</el-button>
            <el-button type="text" class="product-item-delete" v-if="remove2 === 1" v-on:click="remove2 = 0">取消</el-button>
            <el-card class="product-item-clear">
              <div class="product-item" v-for="(view,index) in yestodayView">
                <div class="product-item-remove" v-if="remove2 === 1 " v-on:click="removeViewHistory(view.id)">
                  ×
                </div>
                <img :src="URL.PIC + view.mainImgPath"/>
                <span>{{view.title}}</span>
                <p>￥{{view.price}}</p>
              </div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="更早以前" placement="top">
            <el-button type="text" class="product-item-delete1" v-if="remove3 === 0" v-on:click="remove3 = 1">删除</el-button>
            <el-button type="text" class="product-item-delete1" v-if="remove3 === 1" v-on:click="remove3 = 0">取消</el-button>
            <el-card class="product-item-clear">
              <div class="product-item"  v-for="(view,index) in earlierView">
                <div class="product-item-remove" v-if=" remove3 === 1 "  v-on:click="removeViewHistory(view.id)">
                  ×
                </div>
                <img :src="URL.PIC + view.mainImgPath"/>
                <span>{{view.title}}</span>
                <p>￥{{view.price}}</p>
              </div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item placement="top">

          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <Footbars/>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import MemberHeadMenu from './components/MemberHeadMenu';
import {getViewHistory ,removeViewHistory} from '@/api/member'
export default {
  name: 'MemberFootprint',
  components: {
    Headbar,
    HeadMenu,
    Hungbar,
    Footbars,
    MemberHeadMenu,
  },
  data() {
    return {
      currentTime:'',
      todayView:[],
      yestodayView:[],
      earlierView:[],
      remove1:0,
      remove2:0,
      remove3:0,
    }
  },
  created() {
    this.getViewHistory();
  },
  methods: {
    //获得会员我的足迹列表
    getViewHistory(){
      this.remove1 = 0;
      this.remove2 = 0;
      this.remove3 = 0;
      this.todayView = [];
      this.yestodayView = [];
      this.earlierView = [];
      getViewHistory({page:1,size:100}).then(res =>{
        var currentTime =this.strToTime(this.fmtDate(new Date(), "ymd"));
        if (res.code == 200) {
          res.data.forEach((item,index) =>{
            var viewTime = this.strToTime(item.date);
            if (viewTime == currentTime) {
              this.todayView = item.list;
            }if (viewTime == (currentTime-24*3600*1000)) {
              this.yestodayView = item.list;
            }else if(viewTime <= (currentTime-24*3600*1000)){
              this.earlierView = this.earlierView.concat(item.list);
            }
          })
        }
      })
    },
    //删除足迹
    removeViewHistory(viewId){
      this.$confirm('确定删除此条足迹吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeViewHistory({ids:viewId}).then(res=>{
          if(res.code === 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getViewHistory();
          }
        });
      }).catch(() => {
      });
    },
    // 将日期字符串转换为时间
    strToTime(str){
      str = str.replace('/-/g', '/');   //去空格字符等
      return new Date(str).getTime();
    },

  }


  }

</script>
<style lang="scss">
.el-timeline-item__timestamp {
  font-size:16px;
  color:#333333;
  line-height:20px;
}

.product-item-delete{
  position: absolute;
  top: -5px;
  left: 80px;
  color: #888888;
}

.product-item-delete1{
  position: absolute;
  top: -5px;
  left: 120px;
  color: #888888;
}

.el-card__body {
  padding: 0px;
}

.el-timeline-item__node {
  background-color: #fafafb;
}

  .product-item{
    // float: left;
    width: 22%;
    height: 320px;
    margin-top: 2%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 2%;
    float: left;
    background: #fff;
    text-align: center;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238, 238, 238, 0.66);
    box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.06);
    .product-item-remove {
      position: absolute;
      z-index: 1;
      margin-left: 19%;
      margin-top: -5px;
      text-align: center;
      font-size: 25px;
      line-height: 40px;
      color: #AAAAAA;
      cursor: pointer;
    }

    img{
      width:180px;
      height:180px;
      border-radius:10px;
      margin: 20px 20px 15px;
    }
    span{
      width:180px;
      font-size:12px;
      color:rgba(51,51,51,1);
      line-height:16px;
      text-align: center;
      display:block;
      margin-left: 20px;
      height: 30px;
    }
    p{
      font-size:16px;
      color:#D0021B;
      line-height:20px;
      text-align: center;
    }
  }
  .el-timeline-item__node{
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fffff;
    border-radius: 50%;
    border: 2px solid #255B8B;
  }
.el-timeline-item__tail {
  position: absolute;
  left: 10px;
  height: 100%;
  border-left: 1px solid #CCCCCC;
}

  .footprint-title{
    margin-top: 20px;
    width: 1200px;
    height: 56px;
    background-color: #fff;
    span{
      margin: 20px 20px 20px;
      line-height: 56px;
      font-size: 16px;
      color: #333333;
    }

  }

.el-card {
  border: 0px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  -webkit-transition: .3s;
  transition: .3s;
}

.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
  -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
  box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
}

  .product-item-clear{
    clear: both;
    background: #f7f7f7;
  }

  .el-timeline {
    margin-top: 40px;
    font-size: 16px;
    list-style: none;
    .el-timeline-item__node--normal{
      width: 15px;
      height: 15px;
      left: 1px;
    }
    .el-timeline-item:last-child {
        .el-timeline-item__node {
          display :inline-block;
          position: relative;
          margin-right: 10px;
          border: 0px;
          background: url("../../assets/images/member/view_hostory.png") no-repeat bottom right;
        }
        .el-timeline-item__node--normal{
          width: 20px;
          height: 25px;
        }
      }
}
</style>
